<template>
  <div class="app-container">
    <!-- 原有导航链接 -->
    <nav class="top-nav">
      <router-link to="/about" class="nav-link">
        跳转到 About 页面
      </router-link>
      <router-link to="/Now" class="nav-link">
        跳转到 Now 页面
      </router-link>
    </nav>
    
    <div class="content-wrapper">
      <!-- 章节目录（带扩展功能） -->
      <aside class="chapter-sidebar">
        <div class="directory-title">
          <h2>章节目录</h2>
          <div class="divider"></div>
        </div>
        
        <ul class="chapter-list">
          <li 
            v-for="(chapter, index) in chapters" 
            :key="chapter.id" 
            class="chapter-item"
            :class="{ 'has-children': chapter.sections && chapter.sections.length }"
          >
            <!-- 章节链接 -->
            <router-link 
              :to="chapter.path" 
              class="chapter-link"
              :class="{ 'active': $route.path === chapter.path }"
            >
              <span class="chapter-number">{{ index + 1 }}.</span>
              <span class="chapter-name">{{ chapter.name }}</span>
              
              <!-- 展开/折叠图标（有子章节时显示） -->
              <span 
                class="toggle-icon" 
                v-if="chapter.sections && chapter.sections.length"
                @click.stop="toggleChapter(index)"
              >
                <i class="fas" :class="chapter.expanded ? 'fa-chevron-down' : 'fa-chevron-right'"></i>
              </span>
            </router-link>
            
            <!-- 子章节列表（可扩展） -->
            <ul 
              class="section-list" 
              v-if="chapter.sections && chapter.sections.length && chapter.expanded"
            >
              <li v-for="(section, secIndex) in chapter.sections" :key="section.id" class="section-item">
                <router-link 
                  :to="section.path" 
                  class="section-link"
                  :class="{ 'active': $route.path === section.path }"
                >
                  <span class="section-number">{{ index + 1 }}.{{ secIndex + 1 }}</span>
                  <span class="section-name">{{ section.name }}</span>
                </router-link>
              </li>
            </ul>
          </li>
        </ul>
      </aside>
      
      <!-- 路由出口 -->
      <main class="main-content">
        <router-view />
      </main>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ChapterDirectory',
  data() {
    return {
      // 章节数据 - 只包含与原有导航相关的内容
      chapters: [
        {
          id: 1,
          name: '首页',
          path: '/about',
          expanded: true
        },
        {
          id: 2,
          name: '第一章节',
          path: '/one',
          expanded: false,
          sections: [
            { id: 21, name: 'Demo1', path: '/one/Demo1' },
            { id: 22, name: 'Demo2', path: '/one/Demo2' },
            { id: 23, name: 'Demo3', path: '/one/Demo3' },
            { id: 24, name: 'Demo4', path: '/one/Demo4' },
            { id: 25, name: 'Demo5', path: '/one/Demo5' },
            { id: 26, name: 'Demo6', path: '/one/Demo6' },
            { id: 27, name: 'Demo7', path: '/one/Demo7' },
            { id: 28, name: 'Demo8', path: '/one/Demo8' },
            { id: 29, name: 'Demo9', path: '/one/Demo9' },
            { id: 210, name: 'Demo10', path: '/one/Demo10' },
            { id: 211, name: 'Demo11', path: '/one/Demo11' },
            { id: 212, name: 'Demo12', path: '/one/Demo12' },
            { id: 213, name: 'Demo13', path: '/one/Demo13' },
            { id: 214, name: 'Demo14', path: '/one/Demo14' },
            { id: 215, name: 'Demo15', path: '/one/Demo15' },
            { id: 216, name: 'Demo16', path: '/one/Demo16' },
            { id: 217, name: 'Demo17', path: '/one/Demo17' },
            { id: 218, name: 'Demo18', path: '/one/Demo18' },
            { id: 219, name: 'Demo19', path: '/one/Demo19' },
            { id: 222, name: 'Demo22', path: '/one/Demo22' },
            { id: 223, name: 'Demo23', path: '/one/Demo23' },
            { id: 224, name: 'Demo24', path: '/one/Demo24' }
          ]
        },
      
        {
          id: 3,
          name: '作业',
          path: '/work',
          expanded: false,
          sections: [
            { id: 31, name: '作业1', path: '/work/work_1' },
            { id: 32, name: '学习', path: '/Now/events' }
          ]
        },
        {
          id: 4,
          name: '学习',
          path: '/learn',
          expanded: false,
          sections: [
            { id: 41, name: '学习1', path: '/learn/learning_1' },
            { id: 42, name: '学习', path: '/Now/events' }
          ]
        }
      ]
    };
  },
  methods: {
    // 展开/折叠子章节
    toggleChapter(index) {
      this.chapters[index].expanded = !this.chapters[index].expanded;
    }
  },
  // 监听路由变化，自动展开当前所在章节
  watch: {
    $route(to) {
      this.chapters.forEach((chapter, index) => {
        const isInChapter = to.path.startsWith(chapter.path) && 
                           (chapter.path === '/' || to.path !== '/');
        
        if (isInChapter && chapter.sections && chapter.sections.length) {
          this.chapters[index].expanded = true;
        }
      });
    }
  },
  // 初始化时展开当前所在章节
  mounted() {
    this.$nextTick(() => {
      this.chapters.forEach((chapter, index) => {
        const isInChapter = this.$route.path.startsWith(chapter.path) && 
                           (chapter.path === '/' || this.$route.path !== '/');
        
        if (isInChapter && chapter.sections && chapter.sections.length) {
          this.chapters[index].expanded = true;
        }
      });
    });
  }
};
</script>

<style scoped>
.app-container {
  min-height: 100vh;
  min-width: 1500px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 顶部导航样式 */
.top-nav {
  padding: 1rem 2rem;
  background-color: #ffffff;
  border-bottom: 1px solid #f0f2f5;
}

.nav-link {
  margin-right: 15px;
  text-decoration: none;
  color: #333;
  padding: 0.5rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.nav-link:hover {
  background-color: #f8f9fa;
}

.nav-link.router-link-exact-active {
  color: #42b983;
  font-weight: bold;
  text-decoration: underline;
}

/* 内容布局 */
.content-wrapper {
  display: flex;
  min-height: calc(100vh - 60px);
}

/* 章节目录样式 */
.chapter-sidebar {
  flex: 0 0 280px;
  background-color: #f9fafb;
  border-right: 1px solid #f0f2f5;
  padding: 1.5rem 1rem;
}

.directory-title {
  margin-bottom: 1.5rem;
  padding-left: 0.5rem;
}

.directory-title h2 {
  margin: 0 0 0.5rem 0;
  color: #2c3e50;
  font-size: 1.2rem;
  font-weight: 600;
}

.divider {
  height: 2px;
  background: #42b983;
  width: 40px;
}

.chapter-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.chapter-item {
  margin-bottom: 0.3rem;
}

.chapter-link {
  display: flex;
  align-items: center;
  padding: 0.6rem 0.8rem;
  color: #34495e;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.2s ease;
  font-weight: 500;
}

.chapter-link:hover {
  background-color: #f0f7f0;
}

.chapter-link.active {
  background-color: #e8f5e9;
  color: #2e7d32;
  font-weight: 600;
}

.chapter-number {
  display: inline-block;
  width: 25px;
  color: #7f8c8d;
}

.toggle-icon {
  margin-left: auto;
  color: #bdc3c7;
  cursor: pointer;
  font-size: 0.8rem;
}

.toggle-icon:hover {
  color: #7f8c8d;
}

/* 子章节样式 */
.section-list {
  list-style: none;
  padding: 0 0 0 1.2rem;
  margin: 0;
  border-left: 1px dashed #e0e0e0;
}

.section-item {
  margin-bottom: 0.2rem;
}

.section-link {
  display: flex;
  align-items: center;
  padding: 0.4rem 0.8rem;
  color: #7f8c8d;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.section-link:hover {
  background-color: #f0f7f0;
  color: #27ae60;
}

.section-link.active {
  background-color: #e8f5e9;
  color: #2e7d32;
  font-weight: 500;
}

.section-number {
  display: inline-block;
  width: 40px;
  font-size: 0.8rem;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  padding: 2rem;
  background-color: #ffffff;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .content-wrapper {
    flex-direction: column;
  }
  
  .chapter-sidebar {
    flex: none;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #f0f2f5;
  }
}
</style>
